// import React from 'react';

// // 定义组件的属性类型
// interface ImageGroupProps {
//   title: string; // 标题
//   images: string[]; // 图片数组
// }

// // 定义ImageGroup组件
// const ImageGroup: React.FC<{ onClick: () => void },ImageGroupProps> = ({ title, images,onClick }) => {

//   // 拖动开始事件处理函数
//   const handleDragStart = (e: DragEvent<HTMLImageElement>, imgSrc: string) => {
//     e.dataTransfer.setData("text/plain", imgSrc); // 将图片的URL作为字符串传递给dataTransfer对象
//   };

//   // 拖放事件处理函数
//   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
//     e.preventDefault(); // 阻止默认行为，允许拖放操作

//     if (e.dataTransfer && e.dataTransfer.getData("text/plain")) { // 判断是否有数据传输
//       const droppedImageSrc = e.dataTransfer.getData("text/plain");
//       console.log(`Dropped image at: ${droppedImageSrc}`); // 在此处处理拖放操作，例如将图片移动到新位置或执行其他操作
//     }
//   };

//   // 拖过事件处理函数
//   const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
//     e.preventDefault(); // 必须用此方法忽略drop事件发生
//   };

//   return (
//     <div className="natural_scenery">
//       <h3>{title}</h3>
//       <span className="iconfont icon-arrow-right"></span>

//       <div className="natural_scenery_img" onDrop={(e) => handleDrop(e)} onDragOver={(e) => handleDragOver(e)}>
//         {images.map((src, index) => (
//           <img key={index} src={src} alt={title} draggable onDragStart={(e) => handleDragStart(e, src)} />
//         ))}
//       </div>
//     </div>
//   );
// };

// export default ImageGroup;

// ImageGroup.tsx
import React from 'react';

interface ImageGroupProps {
    title: string;
    images: string[];
    onClick:() => void;
}

const ImageGroup: React.FC<ImageGroupProps> = ({ title,onClick , images }) => {
  
    return (
        <div className='natural_scenery'>
            <h3>{title}</h3>
            <span>全部 <i className='iconfont icon-arrow-right'></i></span>
            <div className='natural_scenery_img'>
                {images.map((src, index) => (
                    <img key={index} src={src} alt={title} onClick={onClick}/>
                ))}
            </div>
            
        </div>
        
    );
    
    
};

export default ImageGroup;